<template>
  <div class="img-box" ref="imgBox">
    <!-- <p>{{ t }}</p> -->
    <img v-lazy="src" :alt="alt" :src="defaultImg" :class="imgClass" @load="load" :onerror="defaultImg" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgClass: '',
      w: '',
      h: '',
      t: ''
    }
  },
  props: ['src', 'alt'],
  methods: {
    load ($event) {
      if (!this.$refs.imgBox) return
      let pW = this.$refs.imgBox.offsetWidth
      let pH = this.$refs.imgBox.offsetHeight
      
      let cW = $event.target.width
      let cH = $event.target.height
      
      if (cW/cH > 0) {
        if (cW/cH > pW/pH) {
          this.imgClass = 'w-big'
        } else {
          this.imgClass = 'h-big'
        }
      } else {
        this.imgClass = 'h-big'
      }

    }
  },
  mounted () {
    
  }
}
</script>

<style lang="less" scoped>

.img-box {
  width: 100%;
  height: 100%;
  min-height: 20px;
  overflow: hidden;
  position: relative;
}
.w-big {
  height: 100%;
  width: auto;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}
.h-big {
  height: auto;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
</style>
